<template>
<cell :title="title"
      style="padding: 5px 10px;"
      v-longtouch="500">
  <img slot="icon"
       width="45"
       style="margin-right: 5px;"
       :src="folderImg">
  <span slot="inline-desc"
        v-if="!transfer || (transfer && transferStatus == 2)"
        class="folder-desc">{{getFileSize}}{{editDate}}</span>
  <span slot="inline-desc"
        v-if="transfer && transferStatus != 2"
        class="folder-desc"><span>{{transferSize}}/{{fileSize}}</span><span>{{getTransferStatus}}</span></span>
  <check-icon v-if="!transfer || (transfer && transferStatus == 2) || changeRight"
              :value.sync="checkbox.check"></check-icon>
  <div v-if="transfer && transferStatus != 2 && !changeRight"
       class="folder-circle"
       @click="clickCircle">
    <x-circle :stroke-width="10"
              stroke-color="#2486f5"
              :trail-width="10"
              trail-color="#ccc"
              :percent="transferPercent"></x-circle>
    <img :src="videoImg"
         width="16"
         height="16"
         class="folder-video">
  </div>
</cell>

</template>

<script>
import { dateFormat, Cell, CheckIcon, XCircle } from 'vux';
import folderImg from '../assets/filemanager_folder_icon.png';
import videoPause from '../assets/video_pause_pressed.png';
import videoPlay from '../assets/video_play_pressed.png';
import { mapState } from 'vuex';

export default {
  components: {
    Cell,
    CheckIcon,
    XCircle
  },
  data() {
    return {
      videoImg: videoPause,
      transferStatusData: this.transferStatus
    }
  },
  props: {
    type: {
      default: 'folder'
    },
    title: {
      default: 'title'
    },
    folderImg: {
      default: folderImg
    },
    fileSize: {
      default: '0kb'
    },
    editDate: {
      default: dateFormat(new Date(), 'YYYY-MM-DD HH:mm')
    },
    checkbox: {
      type: Object,
      default: () => {
        return {
          check: false
        }
      }
    },
    transfer: {
      default: false
    },
    transferSize: {
      default: '0kb'
    },
    transferType: {
      default: 0 /* 0上传，1下载 */
    },
    transferStatus: {
      default: 0 /* 0正在传输，1暂停传输，2传输完成 */
    },
    transferPercent: {
      default: 0
    }
  },
  computed: {
    getFileSize() {
      return (this.type !== 'folder' && !this.transfer) ? (this.fileSize + ' ') : ''
    },
    getTransferStatus() {
      let transferType = this.transferType === 0 ? '上传' : '下载'
      return this.transferStatusData === 0 ? '' : this.transferStatusData === 1 ? `暂停${transferType}` : `${transferType}完成`
    },
    ...mapState({
          changeRight: state => state.oHeader.show
    })
  },
  methods: {
    clickCell(e) {
      var elem = e.target || e.srcElement,
        tag = false
      while (elem) {
        if (elem.tagName === 'svg' || elem.tagName === 'path' || (elem !== document && elem.className.indexOf('weui-cell__ft') !== -1)) {
          tag = true
          break
        }
        elem = elem.parentNode
      }
      !tag && this.$root.$emit('click-cell')
    },
    longTouchCell(e) {
      var elem = e.target || e.srcElement,
        tag = false
      while (elem) {
        if (elem.tagName === 'svg' || elem.tagName === 'path' || (elem !== document && elem.className.indexOf('weui-cell__ft') !== -1)) {
          tag = true
          break
        }
        elem = elem.parentNode
      }
      !tag && this.$root.$emit('longtouch-cell')
    },
    clickCircle() {
      if (this.transferStatusData === 0) {
        this.transferStatusData = 1
        this.videoImg = videoPlay
      } else if (this.transferStatusData === 1) {
        this.transferStatusData = 0
        this.videoImg = videoPause
      }
    }
  },
  directives: {
    longtouch: {
      inserted: function(el, v, VNode) {
        var x = 0,
          y = 0,
          timer = null,
          touchstart = function(e) {
            if (e.touches.length > 1) {
              return false
            }
            timer = setTimeout(function() {
              timer = null
              VNode.context.longTouchCell(e)
            }, v.value)
            x = e.touches[0].clientX
            y = e.touches[0].clientY
          },
          touchmove = function(e) {
            if (x !== e.touches[0].clientX || y !== e.touches[0].clientY) { /*真机需要一个范围*/
              clearTimeout(timer)
              timer = null
              return false
            }
          },
          touchend = function(e) {
            x = 0
            y = 0
            clearTimeout(timer)
            timer && VNode.context.clickCell(e)
            return false
          }
        el.removeEventListener('touchstart', touchstart, false)
        el.addEventListener('touchstart', touchstart, false)
        el.removeEventListener('touchmove', touchmove, false)
        el.addEventListener('touchmove', touchmove, false)
        el.removeEventListener('touchend', touchend, false)
        el.addEventListener('touchend', touchend, false)
      }
    }
  }
}

</script>

<style>
.vux-check-icon>.weui-icon-success:before {
  color: #2486f5!important;
}

.folder-circle {
  height: 30px;
  width: 30px;
  position: relative;
}

.folder-desc {
  font-size: 12px;
  color: #9e9e9ede;
  display: inline-block;
  width: 100%;
}

.folder-desc span:last-child {
  float: right;
  margin-right: 10px;
}

.folder-video {
  position: absolute;
  top: 7px;
  left: 7px;
}
</style>
